<template>
  <oreo-tabs :tabs="tabs" @change="useStatusChange" :notUsedNum="notUsedNum" />
  <coupon-empty
    v-if="listData.list.length === 0"
    :tabsLabel="tabs.find((item) => item.key === form.useStatus).label"
  />
  <view class="coupon-list" v-else>
    <view class="mb-base" v-for="item in listData.list" :key="item">
      <coupon-card :detail="item" />
    </view>
    <uni-load-more
      class="loadMore"
      v-if="listData.list.length !== 0"
      :status="loadingStatus"
      :content-text="contentText"
      @click.stop="scrollChange"
    />
  </view>
  <!-- 麦当劳 -->
  <coupon-draw-dialog
    v-if="couponExchangeVisible"
    @close="closeCouponDrawDialog"
    @upData="getCouponList"
  />
  <!-- 炫迈 -->
  <strideVisible
    v-if="couponStrideVisible"
    @close="closeStrideVisible"
    @upData="getCouponList"
  />
  <!-- 一物一码优惠券 -->
  <qrcode-coupon
    v-if="modalState.qrcode"
    @close="modalState.qrcode = false"
    @up-data="getCouponList"
  ></qrcode-coupon>
  <!-- 线条小狗 -->
  <line-dog-coupon
    v-if="modalState.lineDogCoupon"
    @close="modalState.lineDogCoupon = false"
    @up-data="getCouponList"
  ></line-dog-coupon>
  <!-- QQshow优惠券 -->
  <qq-show-coupon
    v-if="modalState.qqShowCoupon"
    @close="modalState.qqShowCoupon = false"
    @up-data="getCouponList"
  >

  </qq-show-coupon>
</template>

<script setup>
import { reactive, ref } from "vue";
import OreoTabs from "@/components/oreo-tabs";
import CouponCard from "@/components/coupon-card.vue";
import CouponEmpty from "@/components/empty-coupon.vue";
import strideVisible from "@/components/coupon-draw-dialog/strideVisible.vue";
import CouponDrawDialog from "@/components/coupon-draw-dialog/coupon-draw-dialog.vue";
import QrcodeCoupon from "@/components/coupon-draw-dialog/qrcodeCoupon.vue";
import LineDogCoupon from "@/components/coupon-draw-dialog/lineDogCoupon.vue";
import QqShowCoupon from "@/components/coupon-draw-dialog/qqShowCoupon.vue";
// import privacyPopup from "@/components/privacy-popup";

import { GetCouponList } from "@/services/coupon";
import { userLogin } from "@/services/utils";
import {
  onLoad,
  onShow,
  onUnload,
  onHide,
  onReachBottom,
} from "@dcloudio/uni-app";
import { message } from "@/utils/utils";
import UniLoadMore from "@/components/uni-load-more/uni-load-more.vue";

const form = reactive({ useStatus: 0, pageNum: 1, pageSize: 10 });
const tabs = ref([
  { label: "未使用", key: 0 },
  { label: "已使用", key: 1 },
  { label: "已过期", key: 2 },
]);
const listData = ref({
  total: 0,
  list: [],
});
const notUsedNum = ref(0);
const couponExchangeVisible = ref(false); // 麦当劳
const couponStrideVisible = ref(false); // 炫迈
const modalState = reactive({
  qrcode: false,
  lineDogCoupon: false,
  qqShowCoupon: false
})

let enterTime = "";
let outTime = "";
let stayTime = "";

let SenterTime = "";
let SoutTime = "";
let SstayTime = "";

const contentText = ref("加载更多");
const loadingStatus = ref("more");

onLoad((options) => {
  uni.login({
    provider: "weixin",
    success: async (res) => {
      const loginParam = { type: 1 };
      loginParam.code = res.code;

      const { data } = await userLogin(loginParam);
      uni.setStorageSync("OPENID", data?.openId);
      uni.setStorageSync("UNIONID", data?.unionId);
      uni.setStorageSync("TOKEN", data?.accessToken);
      getApp().emdlz2("set", "user", "openid", data.openId);
      getApp().emdlz("set", "user", "unionId", data.unionId);
      getApp().getUserInfo();

      console.log("options----------", options);
      if (options.isStride === "true") {
        SenterTime = new Date();
        console.log("打开炫迈");
        couponStrideVisible.value = true;
      }
      if (options.isMDL === "true") {
        console.log("打开麦当劳");
        couponExchangeVisible.value = true;
      }
      if (options.isQ4QRCode === "true") {
        console.log("打开一物一码优惠券");
        modalState.qrcode = true;
      }
      if (options.ismaltese === "true") {
        modalState.lineDogCoupon = true;
      }
      if (options.isQQShow === "true") {
        modalState.qqShowCoupon = true;
      }
    },
  });
});

onShow(() => {
  // 用户进入时间
  enterTime = new Date();
  // getApp().getUserInfo();
  getCouponList();
  getApp().accessLogAdd();
});

onHide(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  console.log("页面隐藏" + ":" + stayTime + "s");

  getApp().emdlz(
    "track",
    "event",
    "coupons_redemption_code",
    "view",
    "coupons_redemption_code_page",
    stayTime
  );
});

onUnload(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  console.log("页面卸载" + ":" + stayTime + "s");
  getApp().emdlz(
    "track",
    "event",
    "coupons_redemption_code",
    "view",
    "coupons_redemption_code_page",
    stayTime
  );
});

const getCouponList = async () => {
  console.log(form);
  loadingStatus.value = "more";
  contentText.value = "加载更多";
  const res = await GetCouponList({ ...form });
  if (res?.code === 200) {
    listData.value = res.data;
    if (form.useStatus === 0) {
      notUsedNum.value = res.data.total;
    }
    if (listData.value.list.length === listData.value.total) {
      loadingStatus.value = "noMore";
      contentText.value = "没有更多";
    }
  } else {
    message(res.message);
  }
};

const useStatusChange = (val) => {
  console.log(val);
  form.useStatus = val.tab;
  form.pageNum = 1;
  form.pageSize = 10;
  loadingStatus.value = "more";
  contentText.value = "加载更多";
  getCouponList();
};

onReachBottom(() => {
  console.log(11);
  scrollChange();
});

const scrollChange = async () => {
  if (listData.value.list.length === listData.value.total)
    return (loadingStatus.value = "noMore"), (contentText.value = "没有更多");

  loadingStatus.value = "loading";
  contentText.value = "加载中";
  form.pageNum++;
  const res = await GetCouponList({ ...form });
  if (res?.code === 200) {
    listData.value.list = listData.value.list.concat(res.data.list);
    if (listData.value.list.length === listData.value.total) {
      loadingStatus.value = "noMore";
      contentText.value = "没有更多";
    } else {
      loadingStatus.value = "more";
      contentText.value = "加载更多";
    }

    console.log(listData.value);
  }
};

const closeCouponDrawDialog = () => {
  couponExchangeVisible.value = false;
  getApp().emdlz(
    "track",
    "event",
    "coupons_redemption_code",
    "click",
    "close",
    ""
  );
};
const closeStrideVisible = () => {
  // 用户退出时间
  SoutTime = new Date();
  //停留时间(毫秒)
  SstayTime = (SoutTime?.getTime() - SenterTime?.getTime()) / 1000;
  getApp().emdlz(
    "track",
    "event",
    "Stride_Campaign_get_page",
    "view",
    "get_page",
    SstayTime
  );

  couponStrideVisible.value = false;
};
</script>

<style lang="less" scoped>
@import "@/static/css/theme.less";

.coupon-list {
  box-sizing: border-box;
  padding: 12px 8px;
}
</style>
